/* eslint-disable no-unused-vars */
/* eslint-disable react-hooks/exhaustive-deps */
import React, { useState, useEffect } from 'react';
import { Steps, Collapse, Table } from 'antd';
import { useHistory } from 'react-router-dom';
import qs from 'qs';
import { If } from 'babel-plugin-jsx-control-statements';
import RequestApi from '@/utils/request';
import css from './index.scss';

const ExpandableInfo = (props) => {
	const { id } = props;
	const [data, setData] = useState();
	useEffect(() => {
		RequestApi.connection('get', `parkLotRecordAuditRecord/getAuditRecords/${id}`).then((response) => {
			setData(response.data.rows);
		});
	}, []);
	console.log(data);
	return (
		<If condition={data !== undefined}>
			<div>
				{data.map((item) => (
					<>
						<h1>{item.updatedAt}</h1>
						<span style={{ display: 'inline-block', width: '200px' }}>
							审核人：
							{item.auditorName}
						</span>
						<span style={{ display: 'inline-block', width: '200px' }}>
							审核结果：
							{item.status === 0 ? '审核不通过' : '审核通过'}
						</span>
						<span style={{ display: 'inline-block' }}>
							审核意见：
							{item.auditReason}
						</span>
						<span style={{ display: 'inline-block', margin: '0 20px' }}>
							附件：
							{item.assignTask === null || item.assignTask === []
								? '无'
								: item.assignTask.map((i) => <a href={i.path}>{i.name}</a>)}
						</span>
					</>
				))}
			</div>
		</If>
	);
};

/**
 * 流程履历
 * -
 */
export default () => {
	const { Step } = Steps;
	const { Panel } = Collapse;
	const history = useHistory();
	const search = qs.parse(history.location.search, { ignoreQueryPrefix: true });
	const { id, type, stage } = search;
	const [data, setData] = useState();
	useEffect(() => {
		RequestApi.connection('get', `parkLotRecordProcessHistory/getParkLotRecordHistoryAllList/${id}/${type}`).then(
			(response) => {
				setData(response.data.row);
			}
		);
	}, []);
	const columns = [
		{
			title: '序号',
			dataIndex: 'id',
			key: 'id',
			render: (text, record, index) => `${index + 1}`,
		},
		{
			title: '案件流程',
			dataIndex: 'stage',
			key: 'stage',
			render: (text) => {
				return (
					<>
						<If condition={text === 0}>
							<span>在线提交备案信息</span>
						</If>
						<If condition={text === 1}>
							<span>区停车办资料初核</span>
						</If>
						<If condition={text === 2}>
							<span>区停车办现场勘察</span>
						</If>
						<If condition={text === 3}>
							<span>区市镇级备案审核</span>
						</If>
					</>
				);
			},
		},
		{
			title: '流程开始时间',
			dataIndex: 'startAt',
			key: 'startAt',
		},
		{
			title: '流程结束时间',
			dataIndex: 'endAt',
			key: 'endAt',
		},
		{
			title: '是否同意',
			dataIndex: 'isAgree',
			key: 'isAgree',
			render: (text) => {
				return (
					<>
						<If condition={text === 0}>
							<span>否</span>
						</If>
						<If condition={text === 1}>
							<span>是</span>
						</If>
					</>
				);
			},
		},
		{
			title: '处理状态',
			dataIndex: 'status',
			key: 'status',
			render: (text) => {
				return (
					<>
						<If condition={text === 0}>
							<span>审核不通过</span>
						</If>
						<If condition={text === 1}>
							<span>审核通过</span>
						</If>
					</>
				);
			},
		},
		{
			title: '处理人',
			dataIndex: 'handlerName',
			key: 'handlerName',
		},
	];

	return (
		<If condition={data !== undefined}>
			<div className={css.app}>
				<div className={css.step}>
					<Steps size="small" current={1}>
						<Step title="在线备案" />
						<Step title="资料初审" />
						<Step title="现场勘查" />
						<Step title="领导复审" />
					</Steps>
				</div>
				<div>
					<Collapse defaultActiveKey={1} ghost>
						<Panel header="流水号" key="1">
							<Table
								className="components-table-demo-nested"
								columns={columns}
								expandable={{
									expandedRowRender: (record) => <ExpandableInfo id={record.id} />,
								}}
								dataSource={data}
							/>
						</Panel>
					</Collapse>
				</div>
			</div>
		</If>
	);
};
